<template>
  <div>
    <van-nav-bar
      title="标题"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-tabs v-model="active">
      <van-tab title="" v-for="index in 2" :key="index" />
      <van-tab title="标题" v-for="index in 2" :key="index" />
      <van-tab title="标题" v-for="index in 2" :key="index" />
      <van-tab title="标题" v-for="index in 2" :key="index" />
      <van-tab title="标题" v-for="index in 2" :key="index" />
    </van-tabs>

    <van-sidebar v-model="activeKey">
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
      <van-sidebar-item title="标签名称" />
    </van-sidebar>

    <div class="storeInfo-container">
      <div class="stInfo-row1">
        <div class="img-box">
          <img class="img-cover" src="" alt="" />
        </div>
        <div class="stName fz40">{{ 店面info.name }}</div>
        <div class="stShow dis-flex">
          <div v-for="(item, k) in { label: '占位', value: 0 }" :key="k">
            <p>{{ item.label }}</p>
            <small>{{ item.value }}</small>
          </div>
        </div>
      </div>
      <div>{{ 店面info.description }}</div>
      <div>{{ '隶属门店的通知内容' }}</div>
      门店info
      <pre>{{ 店面info }}</pre>
    </div>
    <div>
      <div class="">
        classList
        <ul>
          <li v-for="(gClassItem, k) in 分类list" :key="k">
            {{ gClassItem.name }}
          </li>
        </ul>
      </div>
      <div class="">
        itemList
        <div v-for="(goodsItem, k) in 某分类下商品list" :key="k">
          <pre>{{ goodsItem }}</pre>
        </div>
      </div>
    </div>
    <bottonNav></bottonNav>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'goodsList',
  mixins: [], //混入
  components: {
    bottonNav: () => {
      return import('@/components/bottomNav.vue');
    },
  }, //组件
  props: {}, //集成属性
  data() {
    return {
      店面info: {},
      分类list: [],
      某分类下商品list: [],
      activeKey: 0,
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    ajaxData: function() {
      let p = {};
      let d = {};
      this.$api
        .get玩具店by店id(p, d)
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.店面info = res.data;
            return this.$api.get玩具分类by店id();
          }
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200 && res.data) {
            this.分类list = res.data;
            return this.$api.get玩具listby分类id();
          }
        })
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.某分类下商品list = res.data;
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.ajaxData();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
.storeInfo-container {
  background-color: rgba(255, 255, 0, 0.2);
  .stInfo-row1 {
    position: relative;
    padding-left: unit((160/7.5), vw);
    .img-box {
      position: absolute;
      top: 0;
      left: 0;
      width: unit((160/7.5), vw);
      height: unit((160/7.5), vw);
    }
  }
  .stName {
  }
}
</style>
